<html>
<head>
    <meta charset="UTF-8">
    <style>
        table
        {
            border-collapse:collapse;
        }
        th, td
        {
            border: 1px solid black;
            height: 40px;
            padding: 15px;
        }
    </style>
</head>
<body>
<center>
    <h1>订单列表</h1>

    <table id="orderTable">
        <tr>
            <th>订单编号</th>
            <th>商品</th>
            <th>价格</th>
            <th>状态</th>
            <th>下单时间</th>
            <th>支付时间</th>
            <th>操作</th>
        </tr>
        <tr>
            <td id="orderId"></td>
            <td id="product"></td>
            <td id="amount"></td>
            <td id="status"></td>
            <td id="orderTime"></td>
            <td id="payTime"></td>
            <td><button>支付</button></td>
        </tr>
    </table>


</center>
<script src="js/libs/jquery.js"></script>
<script>

function loadTable() {
    $.get('/api/flashsale/orderList?userId=zhangsan', (data) => {
        console.log(data);
        console.log($("#orderTable").html());

        content = `
         <tr>
                <th>订单编号</th>
                <th>商品</th>
                <th>价格</th>
                <th>状态</th>
                <th>下单时间</th>
                <th>支付时间</th>
                <th>操作</th>
            </tr>
          `;

        for (let item of data) {
            let status = {'paying':'支付中','finish':'完成','overdue':'过期'}[item.status] || '';
            content += `
            <tr>
                <th>${item.id}</th>
                <th>${item.name}</th>
                <th>${item.amount}</th>
                <th>${status}</th>
                <th>${new Date(item.orderTime).Format("yyyy-MM-dd hh:mm:ss")}</th>
                <th>${item.payTime ? new Date(item.payTime).Format("yyyy-MM-dd hh:mm:ss")  : ''}</th>
                <th><button data-order-id="${item.id}" ${status === '过期' ? '' : ''}>支付</button></th>
            </tr>
            `;
            $("#orderTable").html(content);
            $("#orderTable button").click((e) => {
                let orderId = $(e.target).data('order-id');
                let url = `/api/flashsale/pay?orderId=${orderId}`;
                // alert(url);

                $.get(url, (data) => {

                    if (data === 1) {
                        alert('支付成功!');
                    } else {
                        alert('支付失败!');
                    }

                    loadTable();
                })
            });
        }
    });
}

loadTable();


Date.prototype.Format = function (fmt) { //author: meizz
    var o = {
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

</script>
</body>
</html>